<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*登陆表单样式 start*/
        .wrap{
            width: 100%;
            height: 100%;
            background: url("img/zms.jpg") no-repeat;
            background-size: cover;
        }
        .loginForm{
            margin-left: 35%;
            margin-top: 10%;
            /*background-color: #cccccc;*/
            background-color: #e7e7e7;
            width: 500px;
            height: 500px;
            float: left;
            z-index: 9999;
            position: fixed;
            opacity: 0.75;
        }
        .usernameDiv{
            width: 300px;
            height: 40px;
            padding-left: 130px;
            padding-top: 30px;

        }
        .adminInput{
            width: 200px;
            height: 40px;
            font-size: 15px;
            border-radius: 0.5em;
            /*margin-left: auto;*/
            /*border: 1px solid #cccccc;*/
        }
        .passwordDiv{
            width: 300px;
            height: 40px;
            padding-left: 130px;
            padding-top: 28px;
        }
        .cardDiv{
            width: 120px;
            height: 40px;
            padding-top: 28px;
            padding-left: 14px;
            float: left;
        }
        .cardInput{
            width: 124px;
            height: 40px;
            font-size: 15px;
            border-radius: 0.5em 0em 0em 0.5em;
        }
        .codeDiv{
            width: 100px;
            height: 40px;
            padding-top: 28px;
            padding-right: 20px;
            float: left;
        }
        .codeInput{
            width: 80px;
            height: 40px;
            font-size: 15px;
            border-radius: 0em 0.5em 0.5em 0em;
            /*验证码样式*/
            font-family: Arial;
            font-style: italic;
            font-weight: bold;
            /*border: 0;*/
            letter-spacing: 2px;
            cursor: pointer;
        }
        i{
            position: absolute;
        }
        .adminIcon{
            font-size: 22px;
            margin-top: 8px;
            margin-left: 165px;
        }
        .logoHead{
            width: 250px;
            height: 60px;
            padding-left: 90px;
            padding-top: 25px;
        }
        .usernameLabel{
            width: 60px;
            height: 30px;
            font-size: 16px;
            float: left;
            margin-left: 55px;
            margin-top: 40px;
        }
        .submitLabel{
            width: 160px;
            height: 30px;
            font-size: 13px;
            float: left;
            margin-left: 55px;
            margin-top: 40px;
            cursor: pointer;
        }
        .usernameWrapDiv{
            width: 400px;
            height: 70px;
        }
        .submitDiv{
            width: 150px;
            height: 40px;
            padding-left: 10px;
            padding-top: 28px;
            float: left;
        }
        .submit{
            width: 100px;
            height: 40px;
            border-radius: 0.5em;
        }
        img{
            position: absolute;
        }
        .imgStyle{
            width: 100%;
            height: 100%;
        }
        /*登陆表单样式 end*/
    </style>
    <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<div class="wrap">
    <img src="img/zms.jpg" class="imgStyle">
    <div class="loginForm">
        <form class="layui-form">
            <div class="logoHead">
                <!--<h2 style="margin-top: 15px">房产销售平台管理系统</h2>-->
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>用户名:</label>
                </div>
                <div class="usernameDiv">
                    <i class="layui-icon layui-icon-username adminIcon"></i>
                    <input  autocomplete="off" class="layui-input" type="text" name="email" placeholder="输入用户名" >
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>密码:</label>
                </div>
                <div class="passwordDiv">
                    <i class="layui-icon layui-icon-password adminIcon"></i>
                    <input autocomplete="off" class="layui-input" type="password" name="password" placeholder="输入密码">
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>验证码:</label>
                </div>
                <div class="cardDiv">
                    <input id="loginCard" class="layui-input cardInput" type="text" name="code" placeholder="输入验证码">
                </div>
                <div class="codeDiv">
                    <img class="yzm_img" id="imgVcode" src="${pageContext.request.contextPath}/code" >
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="submitLabel">
                    <label>没有账号？<a href="regist.html" id="loginRegister">点击注册</a></label>
                </div>
                <div class="submitDiv">
                    <button id="loginBtn" type="button" class="layui-btn" lay-submit lay-filter="go" value="登录" >登录</button>

                </div>
            </div>
        </form>
    </div>
</div>

<script src="layui/layui.js"></script>
<script src="js/jquery-1.12.4.js"></script>
<script>
    layui.use(['form','layer'], function(){
        var form = layui.form;
        var layer = layui.layer;
        //各种基于事件的操作，下面会有进一步介绍
        form.on('submit(go)', function(data){
            var fieid = data.field; //当前容器的全部表单字段，名值对形式：{name: value}
            $.ajax({
                url:"${pageContext.request.contextPath}/useres",
                data:JSON.stringify(fieid),
                type:"post",
                contentType:"application/json",
                success:function (res) {
                    console.log(fieid)
                    if(res=="error"){
                        layer.msg("验证码错误")
                    }
                    if(res=="userFalse"){
                        layer.msg("账号密码错误")
                    }
                    if(res=="true"){
                        location = "${pageContext.request.contextPath}/list.jsp";
                        return;
                    }
                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
    });
</script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
        <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
    </div>
</script>
</body>
</html>